<template>
  <div fluid grid-list-md class="agent-query-container">
    <v-layout row wrap align-content-start>
      <v-flex  md12 xs12 class="overflow-tab mb-3">
        <v-tabs
          v-model="tabs"
          class="pos-abs"
          fixed-tabs
          color="transparent"
          slot="extension"
          @input="getTabClicked"
        >
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab
            v-for="(item, index) in tabItems"
            :key="index"
            :href="`#${item.value}`"
            class="primary--text"
          >
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>

      <v-layout row wrap align-content-start justify-start v-show="tabs == '1'">

        <v-flex row md6 justify-center xs12 class="overflow-table">
          <div class="table-container pos-abs">
            <v-card class="custom-table-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="custom-table  dense">
                <caption>
                  <h2>已添加奖励</h2>
                </caption>
                <thead>
                  <tr>
                    <th v-for="(item, i) of headers1" :key="i">
                      <div>{{item.text}}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers1.length" class="column">
                      <div data-v-6fb8a096 class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>

                  <tr v-for="(item, i) of cTableDate1" :key="i" v-show="!item.hide">
                    <td>{{item.rewardName}}</td>
                    <td>{{item.maxCount}}</td>
                    <td>{{item.outPut}}</td>
                    <td>{{item.remain}}</td>
                    <td>{{item.getRate}}</td>
                    <td>
                      <v-btn
                        flat
                        round
                        dark
                        color="green darken-1"
                        class="mx-1"
                        @click="editBonusType(item, 1)"
                      >
                        <span class="mx-1">修改</span>
                        <v-icon color="green darken-1">edit</v-icon>
                      </v-btn>
                      <v-btn
                        flat
                        round
                        dark
                        color="red darken-1"
                        class="mx-1"
                        @click="deleteBonusType(item, 1)"
                      >
                        <span class="mx-1">删除</span>
                        <v-icon color="red darken-1">delete_forever</v-icon>
                      </v-btn>
                    </td>
                  </tr>
                  
                  <tr v-if="tableData1.length === 0">
                    <td :colspan="headers1.length" class>
                      <div class="text-md-center">
                        <i aria-hidden="true" class="icon yellow--text text--darken-3 material-icons" >warning</i>
                        <span class="subheading">暂无数据</span>
                      </div>
                    </td>
                  </tr>
                  <tr >
                    <td colspan="6">
                      <v-btn flat round dark color="light-blue" @click="saveConfig">
                        <v-icon>save</v-icon>
                        <span>保存设置</span>
                      </v-btn>
                    </td>
                  </tr>
                  <!-- <tr class="sum-row"></tr> -->
                </tbody>
              </table>
            </v-card>
            
          </div>
        </v-flex>
        
        <v-flex md6 sm12>
          <v-layout>
            <v-flex md12>
              <v-layout wrap justify-space-around class="ml-3">
                <v-flex md2>
                  <div class="bonus-card elevation-3 title">
                    <span>{{bonusItem.rewardName}}</span> 
                  </div>
                </v-flex>
                <!-- <v-flex md2 d-flex justify-center align-end class="pb-1">
                  <span class="title px-2">额度： {{bonusItem.bonusLimit}}</span>
                </v-flex> -->
                <v-flex md3 d-flex justify-center class="px-2 ">
                  <v-text-field type="text" mask="#####" name="maxCount" outline hide-details label="总数" v-model="bonusItem.maxCount"></v-text-field>
                </v-flex>
                <v-flex md3 d-flex justify-center class="px-2 ">
                  <v-text-field type="text" mask="#####" name="getRate" outline hide-details label="概率" v-model="bonusItem.getRate"></v-text-field>
                </v-flex>
                <v-flex md2>
                  <v-btn color="teal" dark @click="addBonusType">
                    <v-icon>add</v-icon>
                    <span>添加</span>
                  </v-btn>
                </v-flex>
              </v-layout>
              <v-layout wrap>
                <table class="bonus-detail-table">
                  <tr v-for="(item, i) of bonusData" :key="i">
                    <td width="20%" :class="`table-bonus-name bonus-color-${item.color}`" @click="editBonusItem(item)">
                      <span>{{item.rewardName}}</span>
                    </td>
                    <td width="80%" class="text-md-left pl-3">
                      <span>(剩余{{item.remain}}张可添加)</span>
                      <!-- <div v-else>
                        <span @click="editBonusItem(item, type)" v-for="(type, ti) of item.bonusTypes" :key="ti" :class="`bonus-type bonus-color-${item.color}`">{{type.value}}</span>
                      </div> -->
                    </td>
                  </tr>
                </table>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
      <v-layout row wrap align-content-start justify-start v-show="tabs == '2'">

        <v-flex row md12 sm12 justify-center xs12 class="overflow-table">
          <div class="table-container pos-abs">
            <v-card class="custom-table-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="custom-table dense">
                <thead>
                  <tr>
                    <th v-for="(item, i) of headers2" :key="i">
                      <div>{{item.text}}</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="datatable__progress" v-if="showProgress">
                    <th :colspan="headers2.length" class="column">
                      <div class="progress-linear" style="height: 5px;">
                        <div
                          class="progress-linear__background teal"
                          style="height: 5px; opacity: 0.3; width: 100%;"
                        ></div>
                        <div class="progress-linear__bar">
                          <div
                            class="progress-linear__bar__indeterminate progress-linear__bar__indeterminate--active"
                          >
                            <div class="progress-linear__bar__indeterminate long teal"></div>
                            <div class="progress-linear__bar__indeterminate short teal"></div>
                          </div>
                        </div>
                      </div>
                    </th>
                  </tr>
                  <tr v-for="(item, i) of tableData2" :key="i" >
                    <td>{{item.rewardName}}</td>
                    <td>{{item.limitCount}}</td>
                    <td>{{item.outPut}}</td>
                    <td>{{item.remain}}</td>
                    <td>
                      <v-btn
                        flat
                        round
                        dark
                        color="green darken-1"
                        class="mx-1"
                        @click="editBonusAmount(item, 2)"
                      >
                        <span class="mx-1">修改</span>
                        <v-icon color="green darken-1">edit</v-icon>
                      </v-btn>
                    </td>
                  </tr>
                  
                </tbody>
              </table>
            </v-card>
            
          </div>
        </v-flex>
      </v-layout>
    </v-layout>
    <v-dialog v-model="dialog" max-width="700px">
      <v-card class="px-3 py-3" >
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <div grid-list-md  v-if="dialogType == 1">
            <v-layout wrap justify-space-around>
              <v-flex
                d-flex
                nowrap
                align-start
                xs12
                sm8
                md5
              >
                <v-layout row align-center>
                  <v-flex xs4>
                    <span class="title">发放总数</span>
                  </v-flex>
                  <v-flex xs8>
                    <v-text-field type="text" mask="#####" v-model="editedItem.maxCount"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex
                d-flex
                nowrap
                align-start
                xs12
                sm8
                md5
              >
                <v-layout row align-center>
                  <v-flex xs4>
                    <span class="title">发奖概率</span>
                  </v-flex>
                  <v-flex xs8>
                    <v-text-field type="text" mask="#####"  v-model="editedItem.getRate"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </div>
          <div grid-list-md  v-if="dialogType == 2">
            <v-layout wrap justify-space-around>
              <v-flex
                d-flex
                nowrap
                align-start
                xs12
                sm12
                md12
              >
                <v-layout row align-center>
                  <v-flex xs4>
                    <span class="title">本期活动发放总数量</span>
                  </v-flex>
                  <v-flex xs8>
                    <v-text-field type="number" v-model="editedItem.limitCount"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
          </div>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="modal" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">注意!</v-card-title>
        <v-card-text class="title">{{modalText}}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
          <v-btn color="green darken-1" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { bonus } from "../../api/activity";
import { mapMutations } from "vuex";
export default {
  data: () => ({
    showProgress: false,
    limit: 50,
    offset1: 0,
    offset2: 0,
    dialog: false,
    dialogType: 1,
    allowEdit: true,
    tabs: "",
    tabItems: [
      {
        text: "本次发奖设置",
        value: 1
      },
      {
        text: "奖项详情列表",
        value: 2
      }
    ],
    pagination1: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    pagination2: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    bonusItem: {
      bonus: '帅1',
      rewardName: '帅1',
      maxCount: 0,
      getRate: 0
    },
    bonusData: [],
    tableData1: [],
    tableData2: [],
    formTitle: "代理资料",
    headers1: [
      { text: "内容", value: "lftid", align: "center", sortable: false },
      { text: "现发放总数", value: "headUrl", align: "center", sortable: false },
      { text: "已发放数量", value: "nickname", align: "center", sortable: false },
      { text: "本次剩余可发放数量", value: "getRate", align: "center", sortable: false },
      { text: "发奖概率", value: "getRate", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    headers2: [
      { text: "种类", value: "shuai1", align: "center", sortable: false },
      { text: "本期活动发放总数量", value: "shuai1", align: "center", sortable: false },
      { text: "已发放数量", value: "shuai1", align: "center", sortable: false },
      { text: "未发放数量", value: "shuai1", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      
    },
    beforeEditedItem: {},
    chipItems: [
      {
        name: "帅1",
        value: "number1"
      },
      {
        name: "帅2",
        value: "number2"
      },
      {
        name: "互",
        value: "number3"
      },
      {
        name: "游",
        value: "number4"
      },
      {
        name: "感",
        value: "number5"
      },
      {
        name: "恩",
        value: "number6"
      },
      {
        name: "一",
        value: "number7"
      },
      {
        name: "路",
        value: "number8"
      },
      {
        name: "有",
        value: "number9"
      },
      {
        name: "你",
        value: "number10"
      },
      {
        name: "红包",
        value: "red"
      },
      {
        name: "钻石",
        value: "amount"
      }
    ],
    modal: false,
    modalText: "",
    showCancel: false,
    currentDate: "",
    extraTr1: {},
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });

    // this.initialize()
      this.getBonusManageList();
      this.getBonusAmountList();
      
  },
  computed: {
    cTableDate1() {
      return _.filter(this.tableData1, (item)=>{
        return !this.tableData1.hide;
      })
    }
  },
  watch: {
    'tableData1': (to, from) => {
      
    }
  },
  methods: {
    refresh() {
      this.offset1 = 0;
      this.offset2 = 0;
      this.pagination1.page = 1;
      this.pagination2.page = 1;
      this.getBonusManageList();
      this.getBonusAmountList();
    },
    // 获取发奖设置列表
    getBonusManageList() {
      const qs = {
        
      };
      this.showProgress = true;
      bonus.getBonusManageList.r(qs).then(({ data }) => {
        console.log("getBonusManageList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            this.tableData1 = $data.leftList;
       
            this.bonusData = $data.rightList;
            this.bonusItem = this.bonusData[0];
            this.bonusData.forEach(item=>{
              item.color = 'default'
              if(item.rewardName.match('红包')) {
                item.color = 'red'
              } 
              if(item.rewardName.match('钻石')) {
                item.color = 'blue'
              }
            })
            // let rankData = $data.voList;
            // this.tableData1 = rankData;
          }

        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    // 保存设置
    saveBonusTypeConfig() {
      let opt = {
        leftList: this.tableData1
      };
      bonus.saveBonusTypeConfig.r(opt).then(({ data }) => {
        console.log("saveBonusTypeConfig", data);
        this.getBonusManageList();
        this.getBonusAmountList();
        this.dialog = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    // 获取卡片赠送记录
    getBonusAmountList() {
      const qs = {

      };

      this.showProgress = true;
      bonus.getBonusAmountList.r(qs).then(({ data }) => {
        console.log("getBonusAmountList", data);
        if (data.result === 0) {
          let $data = data.data;
          if ($data) {
            this.tableData2 = $data;
          }
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    editBonusAmountList() {
      let opt = {
        ...this.editedItem
      };

      bonus.editBonusAmountList.r(opt).then(({ data }) => {
        console.log("editBonusAmountList", data);
        if (data.result == 0) {
          this.getBonusManageList();
          this.getBonusAmountList();
        }
        this.dialog = false;
        $Vue.$emit("toggleSnackbar", {
          text: data.message
        });
      });
    },
    initialize() {
      this.tableData1 = [
        {
          rewardName:"红包",
          maxCount: 12,
          getRate: 452,
          bonusLimit: 8
        }
      ];
    },
    getTabClicked() {},

    pageChange1(page) {
      this.offset1 = (page - 1) * this.limit;
      this.getBonusManageList();
    },
    confirmDialog() {
      console.log(this.editedItem);
      if (this.dialogType === 1) {
        let index = this.editedItem.index;
        // this.tableData1[index] = this.editedItem;
        if(this.editedItem.maxCount > this.editedItem.limitCount) {
          return $Vue.$emit("toggleSnackbar", {
            text: '现发放总数不能大于该奖品类型阈值！'
          });
        }
        this.$set(this.tableData1, index, this.editedItem);
      } else  if (this.dialogType === 2) {
        this.editBonusAmountList();
      } 

      this.dialog = false;
    },
    confirmModal() {
      // this.cancelAgentQualify();
      console.log(this.editedItem.index);
      this.tableData1[this.editedItem.index].getRate = 0;
      // this.tableData1.splice(this.editedItem.index, 1);
      // this.tableData1[this.editedItem.index].hide = true;
      this.$set(this.tableData1[this.editedItem.index], 'hide', true)
      this.modal = false;
    },
    editBonusAmount(item) {
      this.dialog = true;
      this.formTitle = "修改发放总数量";
      this.editedItem = _.cloneDeep(item);
      this.dialogType = 2;
    },
    editBonusType(item) {
      this.formTitle = "修改奖励数量";
      this.editedItem = _.cloneDeep(item);
      this.dialogType = 1;
      this.dialog = true;
      this.editedItem.index = this.tableData1.indexOf(item)
    },
    deleteBonusType(item) {
      this.modalText = '确认删除该奖励吗？'
      this.modal = true;
      this.editedItem = _.cloneDeep(item);
      this.editedItem.index = this.tableData1.indexOf(item)
    },
    addBonusType() {
      console.log(this.bonusItem)
      let flag = false

      this.tableData1.forEach(item=>{
        if(item.rewardName == this.bonusItem.rewardName) {
          flag = true;
        }
      })

      if(flag) {
        return $Vue.$emit("toggleSnackbar", {
            text: '已添加该类型奖品，请直接修改'
          });
      }
      
      if(!this.bonusItem.maxCount) {
        return $Vue.$emit("toggleSnackbar", {
            text: '请填写奖品发放总数量！'
          });
      }
      if(!this.bonusItem.getRate) {
        return $Vue.$emit("toggleSnackbar", {
            text: '请填写奖品概率！'
          });
      }
      this.tableData1.push({..._.cloneDeep(this.bonusItem), index: this.tableData1.length})
      this.bonusItem.maxCount = ''
      this.bonusItem.getRate = ''
    },
    editBonusItem(item, type) {
      if(item.remain <= 0) {
        return $Vue.$emit("toggleSnackbar", {
            text: '无可添加奖品数量！'
          });
      }
      this.bonusItem = _.cloneDeep(item);

    },
    saveConfig() {
      console.log(this.tableData1)
      this.saveBonusTypeConfig();
    }
  }
};
</script>
<style lang="less" scoped>
.date-wrapper {
  position: relative;

  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: absolute;
    top: 14px;
    right: 6px;

    .date-clear {
      position: absolute;
      right: -20px;
      top: 4px;

      &:hover {
        cursor: pointer;
      }
    }
  }
  .clear-btn {
    position: absolute;
    right: -20px;
    top: 0;
  }
}

.bonus-card {
  position: relative;
  top: 20%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f44336;
  color: white;
}
.table-bonus-name {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #009688;
  color: #009688;
  transition: all 0.3s 0.1ms linear;
  &:hover {
    cursor: pointer;
  }
}



.bonus-color-default {
  border: 1px solid #009688;
  color: #009688;
  &:hover {
    background-color: #009688;
    color: white;
  }
}
.bonus-color-red {
  border: 1px solid #f33446;
  color: #f33446;
  &:hover {
    background-color: #f33446;
    color: white;
  }
}
.bonus-color-blue {
  border: 1px solid #3da1ff;
  color: #3da1ff;
  &:hover {
    background-color: #3da1ff;
    color: white;
  }
}
.bonus-type {
  width: 4em;
  border-radius: 6px;
  height: 100%;
  margin-right: 12px;
  display: inline-block;
  text-align: center;
  &:hover {
    cursor: pointer;
  }
}
.bonus-detail-table {
  width: 100%;
  margin-left: 12px;
  margin-top: 12px;

  tr {
    height: 24px;
    td {
      font-size: 1.4em;
    }
  }
}
</style>